<template>
  <div class="cart-page">
    <div class="cart-header">
      <svg class="back-arrow" viewBox="0 0 24 43" @click="handleBack()">
        <path d="M20 2 L4 21.5 L20 41" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>
      </svg>
      <input class="order-search" placeholder="搜索我的订单" v-model="searchText" />
      <svg class="icon-gouwuche"><use xlink:href="#icon-gouwuche"></use></svg>
      <svg class="order-more-icon" viewBox="0 0 43 43"><circle cx="21.5" cy="21.5" r="21.5" fill="#f5f5f5"/><circle cx="11" cy="21.5" r="3" fill="#bbb"/><circle cx="21.5" cy="21.5" r="3" fill="#bbb"/><circle cx="32" cy="21.5" r="3" fill="#bbb"/></svg>
    </div>
    <div class="order-tabs">
      <div v-for="tab in tabs" :key="tab.value" :class="['order-tab', {active: tab.value===activeTab}]" @click="activeTab=tab.value">{{tab.label}}</div>
    </div>
    <div v-if="!filteredOrders.length" class="cart-empty cart-list-area">
      <svg class="cart-empty-icon" viewBox="0 0 120 80">
        <rect x="20" y="40" width="80" height="30" rx="10" fill="#f5f5f5"/>
        <circle cx="40" cy="70" r="6" fill="#eee"/>
        <circle cx="80" cy="70" r="6" fill="#eee"/>
        <rect x="40" y="30" width="40" height="20" rx="6" fill="#fafafa"/>
      </svg>
      <div class="cart-empty-text">订单是空的哦，快去下单吧</div>
    </div>
    <div v-else class="cart-list-area">
      <div class="cart-list">
        <div class="order-block" v-for="order in filteredOrders" :key="order.id">
          <div class="order-block-header">
            <span class="order-status">{{ order.status }}</span>
            <span class="order-time">{{ formatTime(order.time) }}</span>
          </div>
          <div class="cart-item" v-for="item in order.products" :key="item.id">
            <img class="cart-item-img" :src="item.imgs ? item.imgs[0] : item.img" />
            <div class="cart-item-info">
              <div class="cart-item-title">{{ item.title }}</div>
              <div class="cart-item-subtitle">{{ item.subtitle }}</div>
              <div class="cart-item-bottom">
                <span class="cart-item-price">￥{{ item.price }}</span>
                <span class="cart-item-count">x{{ item.count }}</span>
              </div>
            </div>
          </div>
          <div class="order-block-footer">
            <span>共{{ order.products.length }}件商品</span>
            <span class="order-total">合计￥{{ order.products.reduce((sum, p) => sum + (p.price * (p.count||1)), 0).toFixed(2) }}</span>
            <button v-if="order.status==='待收货'" class="order-receive-btn" @click="handleReceive(order)">收货</button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showCommentDialog" class="comment-dialog-mask">
      <div class="comment-dialog">
        <div class="comment-title">评价商品</div>
        <textarea v-model="commentText" class="comment-input" placeholder="写下你的评价..." />
        <button class="comment-submit" @click="submitComment">提交评价</button>
      </div>
    </div>
    <div class="cart-guess">
      <div class="guess-title">猜你喜欢</div>
      <div class="guess-goods-list">
        <div class="goods-card" v-for="g in guessList" :key="g.id">
          <div class="goods-img-wrap">
            <img :src="g.img" class="goods-img" />
          </div>
          <div class="goods-info">
            <div class="goods-title">{{ g.title }}</div>
            <div class="goods-desc">{{ g.desc }}</div>
            <div class="goods-price-row">
              <span class="goods-price">￥{{ g.price }}</span>
              <span class="goods-old-price" v-if="g.oldPrice">￥{{ g.oldPrice }}</span>
              <span class="goods-sold" v-if="g.sold">已售{{ g.sold }}</span>
            </div>
            <div class="goods-tags" v-if="g.tags && g.tags.length">
              <span class="goods-tag" v-for="tag in g.tags" :key="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const ORDER_KEY = 'order_list_v1';
function saveOrders(orders) {
  localStorage.setItem(ORDER_KEY, JSON.stringify(orders));
}
function loadOrders() {
  try {
    return JSON.parse(localStorage.getItem(ORDER_KEY)) || [];
  } catch { return []; }
}
export default {
  name: 'Order',
  data() {
    return {
      tabs: [
        { label: '全部', value: 'all' },
        { label: '待付款', value: '待付款' },
        { label: '待发货', value: '待发货' },
        { label: '待收货', value: '待收货' },
        { label: '评论', value: '评论' }
      ],
      activeTab: 'all',
      guessList: [
        { id: 101, img: require('/public/img/oder/shop1.png'), tag: '180天最低价', title: 'in summer', desc: '精选优质面料，柔软亲肤，夏天必备单品，潮流百搭。', price: 39.9, oldPrice: 59.9, sold: 120, tags: ['新品', '包邮'] },
        { id: 102, img: require('/public/img/oder/shop2.png'), tag: '友好市集', title: '简约夏季凉席冰丝席三件套空调席夏天', desc: '高密度冰丝，亲肤透气，夏日清凉神器，易清洗不易变形。', price: 79, oldPrice: 109, sold: 94, tags: ['热卖', '限时特价'] }
      ],
      orders: loadOrders(),
      searchText: '',
      showCommentDialog: false,
      commentText: '',
      commentOrderId: null
    }
  },
  computed: {
    filteredOrders() {
      let list = this.orders;
      if (this.activeTab !== 'all') list = list.filter(o => o.status === this.activeTab);
      if (this.searchText) {
        list = list.filter(o => o.products.some(p => p.title.includes(this.searchText)));
      }
      return list;
    }
  },
  mounted() {
    this.startStatusTimer();
    // 订单与Vuex/cart同步，结算后自动push到本地订单
    if (this.$store && this.$store.state && this.$store.state.order && this.$store.state.order.orders) {
      const vuexOrders = this.$store.state.order.orders;
      if (vuexOrders && vuexOrders.length) {
        let changed = false;
        vuexOrders.forEach(vOrder => {
          if (!this.orders.find(o => o.id === vOrder.id)) {
            this.orders.push(vOrder);
            changed = true;
          }
        });
        if (changed) saveOrders(this.orders);
      }
    }
  },
  methods: {
    formatTime(time) {
      const d = new Date(time);
      return d.toLocaleString();
    },
    startStatusTimer() {
      setInterval(() => {
        const now = Date.now();
        let changed = false;
        this.orders.forEach(order => {
          if (order.status === '待发货' && now - new Date(order.time).getTime() > 1 * 60 * 100) {
            order.status = '待收货';
            changed = true;
          }
        });
        if (changed) saveOrders(this.orders);
      }, 10000);
    },
    handleReceive(order) {
      this.commentOrderId = order.id;
      this.showCommentDialog = true;
    },
    submitComment() {
      const order = this.orders.find(o => o.id === this.commentOrderId);
      if (order) {
        order.status = '评论';
        order.comment = this.commentText;
        saveOrders(this.orders);
      }
      this.showCommentDialog = false;
      this.commentText = '';
      this.commentOrderId = null;
    },
    handleBack() {
      if (this.$route.query.from === 'market') {
        this.$router.replace('/market');
      } else {
        this.$router.back();
      }
    }
  },
  watch: {
    orders: {
      handler(val) { saveOrders(val); },
      deep: true
    }
  }
}
</script>
<style scoped>
.cart-page {
  background: #fff;
  min-height: 100vh;
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.cart-header {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 5px 24px 0 24px;
  position: relative;
  background: none;
  border-bottom: none;
  margin-top: 10px;
}
.back-arrow {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  cursor: pointer;
}
.icon-gouwuche {
  width: 43px;
  height: 43px;
  margin-left: 12px;
  vertical-align: middle;
  fill: #222;
}
.order-search {
  width: 476px;
  height: 64px;
  border-radius: 32px;
  border: none;
  background: #f5f5f5;
  font-size: 25px;
  padding: 0 28px;
  margin-right: 18px;
  box-sizing: border-box;
}
.order-more-icon {
  width: 43px;
  height: 43px;
  margin-left: 12px;
  vertical-align: middle;
}
.order-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  background: none;
  margin-top: 20px;
  border-bottom: none;
}
.order-tab {
  flex: 1;
  text-align: center;
  font-size: 28px;
  color: #8b8b8b;
  font-weight: normal;
  cursor: pointer;
  position: relative;
  line-height: 42px;
}
.order-tab.active {
  color: #222;
  font-weight: bold;
}
.order-tab.active::after {
  content: '';
  display: block;
  width: 60px;
  height: 6px;
  background: #fe2c55;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
}
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60px 0 0 0;
  min-height: 478px;
  justify-content: center;
}
.cart-empty-icon {
  width: 120px;
  height: 80px;
  margin-bottom: 18px;
}
.cart-empty-text {
  color: #888;
  font-size: 22px;
}
.cart-list-area {
  padding: 0 0 0 0;
  min-height: 478px;
}
.cart-list {
  padding: 18px 18px 0 18px;
}
.cart-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 28px;
  background: #fafafa;
  border-radius: 18px;
  padding: 24px 22px;
  min-height: 140px;
  font-size: 0;
}
.cart-item-img {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  object-fit: cover;
  margin-right: 24px;
}
.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.cart-item-title {
  font-size: 28px;
  color: #222;
  font-weight: bold;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.6em;
}
.cart-item-subtitle {
  font-size: 22px;
  color: #888;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em;
}
.cart-item-bottom {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cart-item-price {
  color: #fe2c55;
  font-size: 26px;
  font-weight: bold;
}
.cart-item-count {
  color: #888;
  font-size: 22px;
}
.order-block {
  background: #fafafa;
  border-radius: 18px;
  margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 18px 18px 0 18px;
}
.order-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.order-status {
  color: #fe2c55;
  font-size: 20px;
  font-weight: bold;
}
.order-time {
  color: #bbb;
  font-size: 18px;
}
.order-block-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  color: #888;
  margin-top: 8px;
  padding-bottom: 12px;
}
.order-total {
  color: #fe2c55;
  font-weight: bold;
  font-size: 30px;
}
.order-receive-btn {
  background: #fe2c55;
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 24px;
  padding: 10px 32px;
  margin-left: 18px;
  font-weight: bold;
  cursor: pointer;
}
.comment-dialog-mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.comment-dialog {
  width: 420px; background: #fff; border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  padding: 32px 32px 24px 32px;
  display: flex; flex-direction: column; align-items: stretch;
}
.comment-title {
  font-size: 28px; font-weight: bold; color: #222; margin-bottom: 18px;
}
.comment-input {
  min-height: 80px; font-size: 22px; border-radius: 12px; border: 1px solid #eee; padding: 12px; margin-bottom: 18px; resize: none;
}
.comment-submit {
  background: #fe2c55; color: #fff; border: none; border-radius: 22px; font-size: 24px; padding: 10px 0; font-weight: bold; cursor: pointer;
}
.cart-guess {
  margin: 18px 0 0 0;
  padding: 0 18px;
}
.guess-title {
  font-size: 32px;
  color: #222;
  font-weight: bold;
  margin-bottom: 10px;
}
.guess-goods-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 2px;
  box-sizing: border-box;
  max-width: 750px;
  margin: 0 auto;
}
.goods-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  width: 350px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 710px;
}
.goods-img-wrap {
  width: 362px;
  height: 482px;
  overflow: hidden;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.goods-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.goods-info {
  padding: 18px 18px 0 18px;
  height: 228px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}
.goods-title {
  font-size: 27px;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.6em;
}
.goods-desc {
  font-size: 20px;
  color: #888;
  margin-bottom: 8px;
  line-height: 1.4;
  min-height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.8em;
}
.goods-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.goods-price {
  color: #fe2c55;
  font-size: 28px;
  font-weight: bold;
}
.goods-old-price {
  color: #bbb;
  font-size: 20px;
  text-decoration: line-through;
}
.goods-sold {
  color: #bbb;
  font-size: 18px;
}
.goods-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.goods-tag {
  background: #f5f5f5;
  color: #fe2c55;
  font-size: 18px;
  border-radius: 8px;
  padding: 2px 10px;
}
</style> 